<template>
  <a-spin :spinning="confirmLoading">
    <div class="info">
      <div>
        <p>报修单号</p>
        <p>{{ this.model.faultRepairNo }}</p>
      </div>
      <div>
        <p>报修名称</p>
        <p>{{ this.model.faultRepairName }}</p>
      </div>
      <div>
        <p>故障等级</p>
        <p>{{ this.model.faultRepairLevelId_dictText }}</p>
      </div>
      <div>
        <p>故障时间</p>
        <p>{{ this.model.faultRepairTime }}</p>
      </div>
      <div>
        <p>报修人</p>
        <p>{{ this.model.createBy_dictText }}</p>
      </div>
      <div>
        <p>提报时间</p>
        <p>{{ this.model.createTime }}</p>
      </div>
    </div>
    <j-form-container disabled style="padding:5px;">
      <a-form-model :model="model" slot="detail" style="padding-top:10px;">
        <p style="color:#000;">报修图片</p>
        <j-image-upload
          v-if="this.model.faultRepairImages"
          isMultiple
          v-model="model.faultRepairImages"
        ></j-image-upload>
        <span v-if="!this.model.faultRepairImages">暂无</span>
        <p style="color:#000;margin-top: 10px;">报修描述</p>
        <span>{{ this.model.faultRepairRemarks ? this.model.faultRepairRemarks : '暂无' }}</span>
      </a-form-model>
    </j-form-container>
    <j-form-container disabled="true" style="margin-top:10px;">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <div style="display: flex;justify-content: space-between;">
          <div style="width:48%;">
            <p style="margin:0px;">故障维修人员</p>
            <a-form-model-item prop="faultRepairUserId">
              <j-select-user-by-dep :disabled="true" v-model="model.faultRepairUserId" :multi="false" />
            </a-form-model-item>
          </div>
          <div style="width:48%;">
            <p style="margin:0px;">处理开始时间</p>
            <a-form-model-item  prop="faultRepairTimeBegin">
              <j-date
                placeholder="请选择处理开始时间"
                :disabled="true"
                v-model="model.faultRepairTimeBegin"
                :show-time="true"
                date-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </a-form-model-item>
          </div>
          <div style="width:48%;">
            <p style="margin:0px;">处理截至时间</p>
            <a-form-model-item prop="faultRepairTimeEnd">
              <j-date
                placeholder="请选择处理截至时间"
                :disabled="true"
                v-model="model.faultRepairTimeEnd"
                :show-time="true"
                date-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </a-form-model-item>
          </div>
        </div>
        <p style="margin:0px;">审核意见</p>
        <a-form-model-item prop="checkRemarks">
          <a-textarea v-model="model.checkRemarks" :disabled="true" rows="2" placeholder="请输入审批意见" />
        </a-form-model-item>
      </a-form-model>
    </j-form-container>
    <j-form-container :disabled="disabled" style="margin-top:10px;">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <div style="display: flex;justify-content: space-between;">
          <div style="width:48%;">
            <p style="margin:0px;"><span style="color:red;">*</span>&nbsp;故障原因</p>
            <a-form-model-item prop="eneFaultReason">
              <a-input v-model="model.eneFaultReason" :disabled="true" placeholder="请输入故障原因"></a-input>
            </a-form-model-item>
          </div>
          <div style="width:48%;">
            <p style="margin:0px;"><span style="color:red;">*</span>&nbsp;处理方式</p>
            <a-form-model-item prop="eneFaultHandleType">
              <a-input v-model="model.eneFaultHandleType" :disabled="true" placeholder="请输入处理方式"></a-input>
            </a-form-model-item>
          </div>
        </div>
<!--        <div style="display: flex;justify-content: space-between;align-items: center;">-->
<!--          <div style="border-left: 3px solid RGB(0,92,230);padding-left:8px;">更换备件</div>-->
<!--          <j-popup-->
<!--            v-model="model.a"-->
<!--            v-if="!disabled"-->
<!--            field="a"-->
<!--            org-fields="name,id,model,wsnub"-->
<!--            dest-fields="name,deviceId,model,wsnub"-->
<!--            code="ene_spare_parts"-->
<!--            :multi="false"-->
<!--            placeholder="选择备品备件"-->
<!--            @input="popupCallback"-->
<!--            style="width:150px;"-->
<!--          />-->
<!--        </div>-->
        <div v-if="dataSource && dataSource.length > 0" style="margin-top:5px;">
          <a-table rowKey="key" bordered :data-source="dataSource" :columns="columns" :pagination="false" size="small">
            <template slot="usenum" slot-scope="text, record">
              <div class="editable-cell">
                <div v-if="record.editable" class="editable-cell-input-wrapper">
                  <a-input-number
                    v-model="record.usenum"
                    @change="handleChange"
                    @pressEnter="onCellChange(record, 'usenum')"
                  /><a-icon type="check" class="editable-cell-icon-check" @click="onCellChange(record, 'usenum')" />
                </div>
                <div v-else class="editable-cell-text-wrapper">
                  {{ text }}
                  <a-icon type="edit" class="editable-cell-icon" @click="edit(record)" />
                </div>
              </div>
            </template>
            <template slot="operation" slot-scope="text, record">
              <a-popconfirm v-if="dataSource.length" title="确定要删除吗?" @confirm="() => onDelete(record.key)">
                <a href="javascript:;" style="color: red">删除</a>
              </a-popconfirm>
            </template>
          </a-table>
        </div>
        <p style="margin:5px 0px;">维修说明</p>
        <a-form-model-item prop="eneFaultRepairRemarks">
          <a-textarea v-model="model.eneFaultRepairRemarks" rows="2" :disabled="true" placeholder="请输入维修说明" />
        </a-form-model-item>
        <p style="margin:5px 0px;">维修图片</p>

        <a-form-model-item prop="eneFaultRepairImages">
          <j-image-upload isMultiple :disabled="true" v-model="model.eneFaultRepairImages"></j-image-upload>
        </a-form-model-item>

        <p style="margin:5px 0px;"><span style="color:red;">*</span>验收人</p>
        <a-form-model-item prop="faultRepairUserId">
          <j-select-user-by-dep v-model="model.repairCheckId" :multi="false" />
        </a-form-model-item>

        <p style="margin:5px 0px;"><span style="color:red;">*</span>验收时间</p>
        <a-form-model-item prop="repairCheckTime">
          <j-date
            placeholder="请选择验收时间"
            v-model="model.repairCheckTime"
            :show-time="true"
            date-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </a-form-model-item>

        <p style="margin:5px 0px;"><span style="color:red;">*</span>验收说明</p>
        <a-form-model-item prop="repairCheckRemark">
          <a-input v-model="model.repairCheckRemark" placeholder="请输入验收说明"></a-input>
        </a-form-model-item>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'EneFaultRepairHandleForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
      visible: false
    }
  },
  data() {
    return {
      value: 0,
      editable: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
         faultRepairUserId: [{ required: true, message: '请输入验收人员!' }],
         repairCheckTime: [{ required: true, message: '请输入验收时间!' }],
         repairCheckRemark: [{ required: true, message: '请输入验收说明!' }]
      },
      url: {
        //add: "/repair/eneFaultRepair/add",
        handle: '/repair/eneFaultRepairHandle/add/check',
        checkHandle: '/repair/eneFaultRepairHandle/addCheck',
        queryById: '/repair/eneFaultRepair/queryById'
      },
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '规格',
          dataIndex: 'model',
          key: 'model'
        },
        {
          title: '库存',
          dataIndex: 'wsnub',
          key: 'wsnub'
        },
        {
          title: '数量',
          dataIndex: 'usenum',
          key: 'usenum',
          width: 150,
          scopedSlots: { customRender: 'usenum' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      dataSource: []
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    handleChange(e) {
      // const value = e.target.value
      // this.value = value
    },
    edit(record) {
      record.editable = true
    },
    onCellChange(record, dataIndex) {
      if (record.usenum <= 0) record.usenum = 0
      if (record.usenum > Number.parseFloat(record.wsnub)) {
        this.$message.error('库存不足')
        record.usenum = Number.parseFloat(record.wsnub)
      }

      record.editable = false
      const dataSource = [...this.dataSource]
      const target = dataSource.find(item => item.key === record.key)
      if (target) {
        target[dataIndex] = record[dataIndex]
        this.dataSource = dataSource
      }
      //console.log('onCellChange', this.dataSource)
    },
    onDelete(record) {
      this.dataSource = this.dataSource.filter(e => {
        return e.key != record
      })
    },
    deal(record) {
      this.model = Object.assign({}, record)
      this.disabled = false
      this.columns[2].className = 'show'
    },
    detail(record) {
      this.columns.pop()
      this.model = Object.assign({}, record)
      this.model.eneFaultReason = ''
      this.model.eneFaultHandleType = ''
      this.model.eneFaultRepairRemarks = ''
      this.model.eneFaultRepairImages = ''
      this.model.faultRepairUserId = ''
      this.model.repairCheckTime = ''
      this.model.repairCheckRemark = ''
      this.model.repairCheckId = ''
      this.columns[2].className = 'hide'
      this.repairInfo()
    },
    deviceTypeFiles() {},
    repairInfo() {
      getAction(this.url.queryById, { id: this.model.id }).then(res => {
        console.log(res.result,111111111)
        this.disabled = false
        this.model.id = res.result.id
        this.model.eneFaultReason = res.result.eneFaultReason
        this.model.eneFaultHandleType = res.result.eneFaultHandleType
        this.model.eneFaultRepairRemarks = res.result.eneFaultRepairRemarks
        this.model.eneFaultRepairImages = res.result.eneFaultRepairImages
        this.model.faultRepairUserId = res.result.faultRepairUserId
        this.model.repairCheckId = res.result.repairCheckId
        this.model.repairCheckTime = res.result.repairCheckTime
        this.model.repairCheckRemark = res.result.repairCheckRemark
        this.dataSource = res.result.partsList
        this.disabled = true
      })
    },
    submitForm() {
      const that = this
      // if (!this.model.eneFaultReason) {
      //   this.$message.info('请填写故障原因')
      //   return
      // }
      // if (!this.model.eneFaultHandleType) {
      //   this.$message.info('请填写处理方式')
      //   return
      // }
      if(!this.model.repairCheckId){
        this.$message.info('请填写验收人员')
        return
      }
      if(!this.model.repairCheckTime){
        this.$message.info('请填写验收时间')
        return
      }
      if (!this.model.repairCheckRemark) {
        this.$message.info('请填写验收说明')
        return
      }
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          httpurl += this.url.handle
          method = 'post'
          this.model.partsList = this.dataSource.map(ds => {
            return {
              key: ds.key,
              usenum: ds.usenum
            }
          })
          httpAction(httpurl, this.model, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    popupCallback(...e) {
      e.filter(t => t).forEach(line => {
        if (Number.parseFloat(line.wsnub) <= 0) {
          this.$message.error(line.model + '库存不足')
          return
        }
        if (this.dataSource.filter(ds => ds.key === line.deviceId).length > 0) {
          this.$message.warn('已添加' + line.model + '类型的配件')
          return
        }
        this.dataSource.push({
          key: line.deviceId,
          name: line.name,
          model: line.model,
          wsnub: line.wsnub,
          usenum: 1,
          editable: false
        })
      })
    }
  }
}
</script>
<style scoped lang="less">
.ant-form-item {
  margin-bottom: 5px !important;
}
.info {
  display: flex;
  background-color: RGB(244, 244, 244);
  justify-content: space-around;
  padding: 15px 5px;

  p:nth-child(2) {
    margin: 0px !important;
    color: #000;
  }
}
</style>

<style>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 35px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}
.hide {
  display: none;
}
</style>
